<template>
	<view class="headers">
		<view class="profile">
			<view class="avatar">
				<img :src="user.avatar" alt="User Avatar">
			</view>
			<view class="user-info">
				<h2>{{ user.name }}</h2>
				<view>昵称: {{ user.name }}</view>
				<view>微信号: {{ user.username }}</view>
				<view>地区: {{ user.address }}</view>
			</view>
		</view>
		<hr class="hrs" />
		<!-- 功能列表区域 -->
		<view class="function-list">
			<view class="function-item" @click="goToMoments">
				<view>
					<text class="test">朋友圈</text>
					<image src="/static/img/avatar/right.svg" class="arrow-right" mode="aspectFit" />
				</view>
				<p class="p">模拟数据暂不支持查看好友朋友圈</p>
			</view>
			<view class="function-item" @click="goToMoreInfo">
				<text class="test">更多信息</text>
				<image src="/static/img/avatar/right.svg" class="arrow-right" mode="aspectFit" />
			</view>
			<!-- 其他功能项 -->
		</view>
		<!-- <hr /> -->
		<view class="function-item" @click="goToMoreMess">
			<image class="arrow-left" src="/static/img/avatar/message.svg" mode="aspectFit"></image>
			<text class="test">发消息</text>
		</view>
	</view>
</template>



<script setup>
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	import {
		onMounted,
		getCurrentInstance
	} from 'vue';
	
	// import { onLoad } from "@dcloudio/uni-app"
	

	/* const users = {}
	onLoad: function (contact) {
		this.users = contact.params
	} */
	/* onLoaded(() => {
		const route = useRoute();
		user = route.params;
	}) */

	const route = useRoute();

	// const user = route.params;
	// onBeforeMount(() => {
	// 	const user = route.params.;
	// })


	/* export default {
		onMounted(() => {
				const instance = getCurrentInstance().proxy
				const eventChannel = instance.getOpenerEventChannel();

				eventChannel.on('cntact', function(data) {
					this.user = data
				})
			}
		} */


		/* 	onLoad: function(option) {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptDataFromOpenedPage', {
					data: 'data from test page'
				});
				eventChannel.emit('someEvent', {
					data: 'data from test page for someEvent'
				});
				// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
				eventChannel.on('acceptDataFromOpenerPage', function(data) {
					console.log(data)
				})
			} */




		const user = {
			id: 4,
			name: '赵六',
			username: 'zhaoliu',
			avatar: '/static/img/avatar/avatar1.jpg',
			message: '明天见',
			address: '北京',
			time: '17:10'
		}

		const router = useRouter();

		const goToMoments = () => {
			// 跳转到朋友圈页面的逻辑
			uni.showToast({
				title: '跳转到朋友圈'
			})
		};

		const goToMoreInfo = () => {
			// 跳转到更多信息页面的逻辑
			uni.showToast({
				title: '跳转到更多信息'
			})
		};

		const goToMoreMess = () => {
			// 跳转到发消息页面的逻辑
			uni.showToast({
				title: '跳转到发消息'
			})
		};
</script>

<style scoped>
	.hrs {
		height: 3rpx;
	}

	.headers {
		width: 100%;
		height: 100vh;
		background-color: gainsboro;
	}

	.profile {
		display: flex;
		align-items: center;
		padding: 20px;
		background-color: #fff;
	}

	.avatar img {
		width: 100px;
		height: 100px;
		border-radius: 10%;
		margin-right: 20px;
	}

	.user-info h2 {
		margin: 0;
		font-size: 24px;
	}

	.user-info p {
		margin: 5px 0 0;
		color: #666;
	}


	.function-list {
		margin-bottom: 20px;
	}

	.function-item {
		padding: 12px;
		background-color: #fff;
		border-radius: 4px;
		margin-bottom: 1px;
		cursor: pointer;
	}

	.arrow-right {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		margin-left: auto;
	}

	.arrow-left {
		width: 24px;
		height: 24px;
		margin-left: auto;
	}

	.test {
		font-size: 25rpx;
	}

	.p {
		font-size: 14;
		color: dimgrey;
	}

	.mess {
		background-color: aqua;
		height: 100rpx;
		align-items: center;
		padding-left: 20rpx;
	}
</style>